<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
        vue 中的指令
        {{}}       不能识别html标签   不会将标签中原有的内容覆盖
        v-text    不能识别html标签   会将标签中原有的内容覆盖  innerText
        v-html    能识别html标签    会将标签中原有的内容覆盖  innerHtml
-->
<div id="app">

</div>

<script>
    const vm = new Vue({
        template: `
            <div>
                <h1>学生信息展示</h1>
                <p>学生姓名:{{name.toUpperCase()}}</p>
                <p>学生年龄:{{age+10}}</p>
                <p v-html="stuNo">学生学号:</p>
            </div>
        `,
        data:{
            name: 'jack',
            age: 18,
            stuNo: '学生姓名:<b>2023002</b>'
        }
    })

    vm.$mount("#app")
</script>

</body>
</html>
